<!DOCTYPE html>
<html th:replace="~{fragments/main :: layout(~{::title}, ~{::section}, ~{::popwin})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>客服管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<section>
    <button id="btnAdd" class="layui-btn">添加微信账号</button>
    <table id="kf-table" lay-filter="test"></table>

    <script src="/layui/layui.js"></script>

    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script>
        layui.use(['layer', 'table'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $=layui.jquery;
            $("#btnAdd").click(function(){
                parent.layer.open({
                    type: 1,
                    area:["500px",'500px'],
                    content: $('#winAddAccount') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            });
            form.on('submit(formAddAccount)', function(data){
                $.ajax({
                    url:'/wx/addAccount',
                    type:'post',
                    data:JSON.stringify(data.field),
                    contentType: "application/json;charset=utf-8",
                    dataType:'json',
                    success:function(data){
                        if(data.code == 500){
                            layer.msg(data.msg,{icon: 5});//失败的表情
                            return;
                        }else{
                            layer.msg(data.msg, {
                                icon: 6,//成功的表情
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function(){
                            });
                        }
                    },
                    complete: function () {
                        layer.close(this.layerIndex);
                        window.location="/wx/manage";
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            var cols = [ //表头
                {field: 'id', title: '编号', width:80},
                {field: 'avatar', title: '头像', templet: '#avatarTpl', width:100},
                {field: 'wxId', title: '微信用户名', width:200},
                {field: 'alias', title: '别名'},
                {field: 'nick', title: '昵称'},
                {field: 'deviceKey', title: '接入码    '},
                {field: 'userName', title: '客服'},
                {field: 'initStatus', title: '状态', templet: '#statusTpl'},
                {field: 'loginTime', title: '最近活跃时间'},
                {title: '操作', toolbar: '#opTpl', width:100}
            ];

            //执行渲染
            var tableIns = table.render( {
                elem: '#kf-table', //指定原始表格元素选择器（推荐id选择器）
                response: {
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    , statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , url: "/wx/list"
                , cols: [
                    cols
                ]
            } );
            table.on('tool(test)', function(obj){
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent == 'detail'){
                    window.location = "/wx/detail?userId=" + data.id;
                }
            })

        });

    </script>
    <script type="text/html" id="avatarTpl">
        <div class="layui-btn-container">
            {{#  if(d.avatar != undefined && d.avatar != null && d.avatar != ""){ }}
            <img src="{{d.avatar}}" style="height: 64px; width: 64px;">
            {{#  } else { }}
            <img src="https://www.agri35.com/UploadFiles/img_0_1093847288_3038136586_26.jpg" style="height: 64px; width: 64px;">
            {{#  } }}
        </div>
    </script>
    <script type="text/html" id="opTpl">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="detail">详细</a>
        </div>
    </script>
    <script type="text/html" id="statusTpl">
        {{#  if(d.initStatus == 0){ }}
        已接入
        {{#  } else { }}
        未接入
        {{#  } }}
    </script>
</section>
<div id="winAddAccount" style="display: none" th:fragment="popwin">
    <div  class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">微信用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="wxId" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-filter="user"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客服：</label>
            <div class="layui-input-block">

                <select name="csId" >
                    <option th:each="u : ${users}" th:value="${u.id}" required th:text="${u.userName}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formAddAccount">保存</button>
                <button class="layui-btn layui-btn-primary" onclick="layer.close(layer.index);">关闭</button>
            </div>
        </div>
        &nbsp;&nbsp; 微信用户名请填写微信号
    </div>
</div>
</body>
</html>